<template>
  <div>
    <el-input
      v-model="input"
      placeholder="请输入订单号"
      style="width: 300px"
    ></el-input
    ><el-button type="primary" @click="lookcategories">所搜分类</el-button>
    <el-row>
      <el-button type="primary" @click="addscategories">添加分类</el-button>
    </el-row>
    <el-table
      :data="categoriesList"
      style="width: 100%"
      row-key="cat_id"
      border
      :unique-opened="true"
      lazy
    >
      <el-table-column prop="cat_id" label="分类ID" sortable> </el-table-column>
      <el-table-column prop="cat_name" label="分类名称"> </el-table-column>
      <el-table-column prop="cat_level" label="层级">
        <template slot-scope="scope">
          <el-button type="danger" disabled v-if="scope.row.cat_level == 0"
            >一级</el-button
          >
          <el-button
            type="warning"
            disabled
            v-else-if="scope.row.cat_level == 1"
            >二级</el-button
          >
          <el-button type="info" disabled v-else-if="scope.row.cat_level == 2"
            >三级</el-button
          >
        </template>
      </el-table-column>

      <el-table-column prop="address" label="操作">
        <template slot-scope="scope">
          <el-row>
            <el-button
              type="primary"
              icon="el-icon-edit"
              round
              @click="Editcareg(scope.row)"
              >编辑</el-button
            >
            <el-button
              type="danger"
              icon="el-icon-delete"
              round
              @click="deleteCateg(scope.row)"
              >删除</el-button
            >
          </el-row>
        </template>
      </el-table-column>
    </el-table>
    <!-- 添加分类弹窗 -->
    <el-dialog title="添加分类" :visible.sync="dialogaddscategories">
      <el-form :model="addCategories">
        <el-form-item label="分类父ID">
          <el-input
            v-model="addCategories.cat_pid"
            autocomplete="off"
          ></el-input>
        </el-form-item>
        <el-form-item label="分类名称">
          <el-input
            v-model="addCategories.cat_name"
            autocomplete="off"
          ></el-input>
        </el-form-item>
        <el-form-item label="分类层级">
          <el-input
            v-model="addCategories.cat_level"
            autocomplete="off"
          ></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogaddscategories = false">取 消</el-button>
        <el-button type="primary" @click="addsCategories">确 定</el-button>
      </div>
    </el-dialog>
    <!-- 编辑分类弹窗 -->
    <el-dialog title="编辑分类" :visible.sync="dialogEditcateg">
      <el-form :model="editcareg">
        <el-form-item label="分类父ID">
          <el-input v-model="editcareg.cat_id" disabled></el-input>
        </el-form-item>
        <el-form-item label="分类名称">
          <el-input v-model="editcareg.cat_name"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogEditcateg = false">取 消</el-button>
        <el-button type="primary" @click="EditCategories">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      categoriesList: [], //所有的数据
      //添加分类
      dialogaddscategories: false, // 弹窗
      addCategories: {
        cat_pid: "", //分类父 ID
        cat_name: "", //分类名称
        cat_level: "", //分类层级
      },
      //编辑
      dialogEditcateg: false,
      editcareg: {},
      //搜索
      input: "",
    };
  },
  methods: {
    //搜索
    async lookcategories() {
      if (!this.input == "") {
        var { data } = await this.$req.get("/categories/" + this.input);
        if (data.meta.status == 200) {
          this.$message({
            showClose: true,
            message: "恭喜你，查找成功",
            type: "success",
          });
          this.categoriesList = [data.data];
          this.input = "";
        } else {
          this.$message.error(data.meta.msg);
        }
      } else {
        this.getCategories();
      }
    },
    //删除
    async deleteCateg(userinfo) {
      var { data } = await this.$req.delete("/categories/" + userinfo.cat_id);
      console.log(data);
      if (data.meta.status == 200) {
        this.$message({
          showClose: true,
          message: "恭喜你，添加商品成功",
          type: "success",
        });
        this.getCategories();
      } else {
        this.$message.error(data.meta.msg);
      }
    },
    //编辑 -- 弹窗
    Editcareg(userinfo) {
      this.editcareg = userinfo;
      // console.log(this.editcareg);
      this.dialogEditcateg = true;
    },
    //编辑
    async EditCategories() {
      console.log(this.editcareg);
      var { data } = await this.$req.put(
        "/categories/" + this.editcareg.cat_id,
        this.editcareg
      );
      if (data.meta.status == 200) {
        this.$message({
          showClose: true,
          message: "恭喜你，商品修改成功",
          type: "success",
        });
        this.dialogEditcateg = false;
        this.getCategories();
      } else {
        this.$message.error(data.meta.msg);
      }
    },
    //添加分类 -- 弹窗
    addscategories() {
      this.dialogaddscategories = true;
    },
    //添加分类
    async addsCategories() {
      var { data } = await this.$req.post("/categories", this.addCategories);
      console.log(data);
      if (data.meta.status == 201) {
        this.$message({
          showClose: true,
          message: "恭喜你，添加商品成功",
          type: "success",
        });
        this.dialogaddscategories = false;
        this.getCategories();
      } else {
        this.$message.error(data.meta.msg);
      }
    },
    //封装渲染
    async getCategories() {
      var { data } = await this.$req.get("/categories");
      this.categoriesList = data.data;
    },
  },
  async created() {
    this.getCategories();
  },
};
</script>

<style>
</style>